<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/5/8
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据传递</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<h4>从页面传递参数到servelet中</h4>
<ol>
    <li>form表单提交:post/get<br/>
         <form action="secondServlet" method="get">

             <input type="text" name="studentName"  placeholder="请输入学生姓名:"/><br>
             <input type="number" name="age"  placeholder="请输入学生年龄:"/><br>
             <input type="radio" name="sex"  value="0"/>男&nbsp;
             <input type="radio" name="sex"  value="1"/>女&nbsp;
             <input type="radio" name="sex"  value="2"/>保密&nbsp;<br>
             <input type="checkbox" name="languages" value="zh">中文&nbsp;
             <input type="checkbox" name="languages" value="en">英文&nbsp;
             <input type="checkbox" name="languages" value="jp">日文&nbsp;<br/>
             <input type="date" name="birthday" placeholder="请选择出生年月:"><br/>
             <input type="submit" value="提交">

         </form>
    </li>
    <li> a标签传递参数/url传递参数
        <a href="secondServlet?search=TOM&status=0">提交参数</a>
    </li>
    <li>ajax异步提交请求</li>
    <li>form表单结合Ajax
        <form id="myForm" >
            <input type="text" name="studentName"  placeholder="请输入学生姓名:"/><br/>
            <input type="number" name="age"  placeholder="请输入学生年龄:" max="30" min="0" style="width: 165px;"><br/>
            <input type="radio" name="sex"  value="0"/>男&nbsp;
            <input type="radio" name="sex"  value="1"/>女&nbsp;
            <input type="radio" name="sex"  value="2"/>保密&nbsp;<br/>
            <input type="checkbox" name="languages" value="zh">中文&nbsp;
            <input type="checkbox" name="languages" value="en">英文&nbsp;
            <input type="checkbox" name="languages" value="jp">日文&nbsp;<br/>
            <input type="date" name="birthday" placeholder="请选择出生年月:"><br/>
            <input type="button"  id="sub-btn" value="提交" >
        </form>
    </li>
</ol>

</body>

<script>
    //ready函数，在页面HTML加载完成后自动执行的方法
    $(function ($){
        //提交按钮绑定点击事件
        $('#sub-btn').click(function (){
            var param = $('#myForm').serialize();//序列化表单所有的值(获取所有url的参数)
            $.ajax({
                url:'secondServlet2',
                type:'post',
                data: param,//提交的参数
                dataType:'text',
                success:function (d){
                    //alert('success')
                    window.location.href = "login1.jsp?"+param;
                },
                error:function (){

                }
            });
        });

    });
</script>
</html>
